<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="../helper.js"></script>
</head>
<body>
  <div id="block1" style="background:orange;padding:5px;border:2px solid black;width:100px;height:100px;position:absolute;top:20px;left:20px">
    <div style="background:red;">&#160;</div>
  </div>
  
  <div id="block2" style="background:orange;padding:5px;border:2px solid black;width:100px;height:100px;position:absolute;top:20px;left:140px;overflow:hidden">
    <div style="background:red;">&#160;</div>
  </div>

  <div id="block3" style="background:orange;padding:5px;border:2px solid black;width:100px;height:100px;position:absolute;top:20px;left:260px;overflow:auto">
    <div style="width:200px;height:1px;background:red;"></div>
  </div>

  <div id="block4" style="background:orange;padding:5px;border:2px solid black;width:100px;height:100px;position:absolute;top:20px;left:380px;overflow:auto">
    <div style="width:1px;height:200px;background:red;"></div>
  </div>

  <div id="block5" style="background:orange;padding:5px;border:2px solid black;width:100px;height:100px;position:absolute;top:20px;left:500px;overflow:auto">
    <div style="width:200px;height:200px;background:red;"></div>
  </div>

  <div id="block6" style="background:orange;padding:5px;border:2px solid black;width:100px;height:100px;position:absolute;top:20px;left:620px;overflow-x:scroll">
    <div style="background:red;">&#160;</div>
  </div>

  <div id="block7" style="background:orange;padding:5px;border:2px solid black;width:100px;height:100px;position:absolute;top:20px;left:740px;overflow-y:scroll">
    <div style="background:red;">&#160;</div>
  </div>

  <div id="block8" style="background:orange;padding:5px;border:2px solid black;width:100px;height:100px;position:absolute;top:20px;left:860px;overflow:scroll">
    <div style="background:red;">&#160;</div>
  </div>
</body>
</html>